<!--
 * @Author: Craft
 * @Date: 2024-08-18
 * @Description: 暗黑破坏神2重置版个人中心页面
-->
<template>
  <view class="d2r-container">
    <!-- 用户信息 -->
    <view class="user-header">
      <view class="user-avatar">
        <image class="avatar-image" src="/static/icons/default-avatar.png" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <text class="user-name">暗黑旅者</text>
        <text class="user-level">等级: 70</text>
      </view>
      <view class="user-action">
        <u-button size="mini" text="编辑" @click="showEditProfileTip"></u-button>
      </view>
    </view>

    <!-- 数据统计 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-value">{{ favoriteItems.length }}</text>
        <text class="stat-label">收藏装备</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value">{{ favoriteBuilds.length }}</text>
        <text class="stat-label">收藏BD</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value">{{ viewHistory.length }}</text>
        <text class="stat-label">浏览记录</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-card">
      <view class="menu-section">
        <text class="section-title">我的收藏</text>
        <view class="menu-item" @click="navigateTo('favorite-items')">
          <view class="menu-icon">
            <u-icon name="star" size="22" color="#d4af37"></u-icon>
          </view>
          <text class="menu-text">收藏的装备</text>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="16" color="#a0a0a0"></u-icon>
          </view>
        </view>
        <view class="menu-item" @click="navigateTo('favorite-builds')">
          <view class="menu-icon">
            <u-icon name="bookmark" size="22" color="#d4af37"></u-icon>
          </view>
          <text class="menu-text">收藏的BD</text>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="16" color="#a0a0a0"></u-icon>
          </view>
        </view>
      </view>

      <view class="menu-section">
        <text class="section-title">应用设置</text>
        <view class="menu-item" @click="showThemeSettings">
          <view class="menu-icon">
            <u-icon name="setting" size="22" color="#d4af37"></u-icon>
          </view>
          <text class="menu-text">主题设置</text>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="16" color="#a0a0a0"></u-icon>
          </view>
        </view>
        <view class="menu-item" @click="clearCache">
          <view class="menu-icon">
            <u-icon name="trash" size="22" color="#d4af37"></u-icon>
          </view>
          <text class="menu-text">清除缓存</text>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="16" color="#a0a0a0"></u-icon>
          </view>
        </view>
      </view>

      <view class="menu-section">
        <text class="section-title">关于我们</text>
        <view class="menu-item" @click="showAboutInfo">
          <view class="menu-icon">
            <u-icon name="info-circle" size="22" color="#d4af37"></u-icon>
          </view>
          <text class="menu-text">关于塔拉夏之书</text>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="16" color="#a0a0a0"></u-icon>
          </view>
        </view>
        <button class="share-button" open-type="share">
          <view class="menu-item">
            <view class="menu-icon">
              <u-icon name="share" size="22" color="#d4af37"></u-icon>
            </view>
            <text class="menu-text">分享给好友</text>
            <view class="menu-arrow">
              <u-icon name="arrow-right" size="16" color="#a0a0a0"></u-icon>
            </view>
          </view>
        </button>
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      <text>塔拉夏之书 v1.0.0</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 数据
const favoriteItems = ref([])
const favoriteBuilds = ref([])
const viewHistory = ref([])

// 生命周期
onMounted(() => {
  loadUserData()
})


// 加载用户数据
function loadUserData() {
  try {
    // 加载收藏的装备
    const items = uni.getStorageSync('favorite_items') || []
    favoriteItems.value = items

    // 加载收藏的BD
    const builds = uni.getStorageSync('favorite_builds') || []
    favoriteBuilds.value = builds

    // 加载浏览记录
    const history = uni.getStorageSync('viewed_builds') || []
    viewHistory.value = history
  } catch (e) {
    console.error('加载用户数据失败', e)
  }
}

// 页面导航
function navigateTo(type) {
  switch (type) {
    case 'favorite-items':
    case 'favorite-builds':
      uni.showModal({
        title: '功能提示',
        content: '该功能将在后续版本中开放，敬请期待！',
        showCancel: false,
        confirmText: '我知道了'
      })
      break
    default:
      break
  }
}

// 显示编辑资料提示
function showEditProfileTip() {
  uni.showModal({
    title: '编辑资料',
    content: '该功能将在后续版本中开放，敬请期待！',
    showCancel: false,
    confirmText: '我知道了'
  })
}

// 显示主题设置
function showThemeSettings() {
  uni.showActionSheet({
    itemList: ['默认暗黑主题', '血色主题 (即将上线)', '天堂主题 (即将上线)'],
    success: function (res) {
      if (res.tapIndex === 0) {
        uni.showToast({
          title: '已应用默认主题',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '该主题即将上线',
          icon: 'none'
        })
      }
    }
  })
}

// 清除缓存
function clearCache() {
  uni.showModal({
    title: '清除缓存',
    content: '确定要清除本地缓存数据吗？',
    success: function (res) {
      if (res.confirm) {
        try {
          // 清除数据缓存
          uni.removeStorageSync('d2r_items')
          uni.removeStorageSync('d2r_builds')
          uni.removeStorageSync('d2r_classes')

          // 保留用户数据
          uni.showToast({
            title: '缓存已清除',
            icon: 'success'
          })
        } catch (e) {
          console.error('清除缓存失败', e)
          uni.showToast({
            title: '清除缓存失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 显示关于信息
function showAboutInfo() {
  uni.showModal({
    title: '关于塔拉夏之书',
    content: '塔拉夏之书是一款暗黑破坏神2重置版资料查询小程序，提供装备查询、BD分享等功能。\n\n版本：v1.0.0\n开发者：Craft Team',
    showCancel: false,
    confirmText: '我知道了'
  })
}
</script>

<style lang="scss" scoped>
@import '@/common/d2r-theme.scss';

.d2r-container {
  min-height: 100vh;
  padding-bottom: 30px;
}

// 用户信息
.user-header {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  background-color: $d2r-bg-darker;

  .user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    border: 2px solid $d2r-gold;
    overflow: hidden;
    margin-right: 15px;

    .avatar-image {
      width: 100%;
      height: 100%;
    }
  }

  .user-info {
    flex: 1;

    .user-name {
      font-size: 18px;
      color: $d2r-gold;
      font-weight: bold;
      margin-bottom: 5px;
      display: block;
    }

    .user-level {
      font-size: 14px;
      color: $d2r-text;
    }
  }
}

// 数据统计
.stats-card {
  display: flex;
  background-color: $d2r-bg-darker;
  margin: 15px;
  border-radius: 8px;
  padding: 15px 0;

  .stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .stat-value {
      font-size: 20px;
      color: $d2r-gold;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 12px;
      color: $d2r-text-muted;
    }
  }

  .stat-divider {
    width: 1px;
    background-color: $d2r-border;
    margin: 0 10px;
  }
}

// 菜单卡片
.menu-card {
  margin: 15px;
  border-radius: 8px;
  overflow: hidden;

  .menu-section {
    background-color: $d2r-bg-darker;
    margin-bottom: 15px;

    .section-title {
      font-size: 14px;
      color: $d2r-text-muted;
      padding: 10px 15px;
      display: block;
      border-bottom: 1px solid $d2r-border;
    }

    .menu-item {
      display: flex;
      align-items: center;
      padding: 15px;
      position: relative;

      &:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 0;
        height: 1px;
        background-color: $d2r-border;
      }

      .menu-icon {
        margin-right: 10px;
      }

      .menu-text {
        flex: 1;
        font-size: 14px;
        color: $d2r-text;
      }
    }
  }
}

// 分享按钮
.share-button {
  background-color: transparent;
  padding: 0;
  margin: 0;
  line-height: 1;
  border: none;

  &::after {
    border: none;
  }
}

// 版本信息
.version-info {
  text-align: center;
  padding: 20px 0;

  text {
    font-size: 12px;
    color: $d2r-text-muted;
  }
}
</style>